﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <script src="/__system/bumblebee/js/v2.js?group=Bumblebee.Configuration"></script>
    <link href="/__system/bumblebee/css/v2.css?group=Bumblebee.Configuration" rel="stylesheet" />

    <!--<link href="https://img2.tomap.me/gateway/css/v4.css" rel="stylesheet" />
    <script src="https://img2.tomap.me/gateway/script/v4.js"></script>-->

    <title>BeetleX web api gateway</title>
</head>
<body>
    <div class="back-div">


    </div>
    <canvas id="canvas" style="position:absolute;top:0px;right:0px;left:0px; height:100%;width:100%;">
    </canvas>
    <div id="page">
        <!--<img v-if="ajax.loading>0" src="images/ajax-loader.gif" style="position:fixed;right:48vw;top:40vh;z-index:90000;width:64px;" />-->
        <main_menu @menu_resize="OnMenuResize($event)" @openwindow="OnOpenWindow($event)"></main_menu>
        <windows_bar :windows="windows" :full="full" :selectwindow="selectWindow.id" @close="OnCloseWindows($event)"></windows_bar>
        <div class="main-content" :style="{left:(full=='max'?'80px':'260px')}">
            <keep-alive>
                <component :is="selectModel" @openwindow="OnOpenWindow($event)" :token="selectWindow.data" :winsize="sizeVersion"></component>
            </keep-alive>
        </div>
        <page_footer></page_footer>
    </div>
    <script>
        pageInit();
        let resizeReset = function () {
            w = canvasBody.width = window.innerWidth;
            h = canvasBody.height = window.innerHeight;
        }

        const opts = {
            particleColor: "rgb(255,255,255)",
            lineColor: "rgb(255,255,255)",
            particleAmount: 50,
            defaultSpeed: 0.1,
            variantSpeed: 0.6,
            defaultRadius: 0.2,
            variantRadius: 0.5,
            linkRadius: 30,
        };

        window.addEventListener("resize", function () {
            deBouncer();
        });

        let deBouncer = function () {
            clearTimeout(tid);
            tid = setTimeout(function () {
                resizeReset();
            }, delay);
        };

        let checkDistance = function (x1, y1, x2, y2) {
            return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
        };

        let linkPoints = function (point1, hubs) {
            for (let i = 0; i < hubs.length; i++) {
                let distance = checkDistance(point1.x, point1.y, hubs[i].x, hubs[i].y);
                let opacity = 1 - distance / opts.linkRadius;
                if (opacity > 0) {
                    drawArea.lineWidth = 0.5;
                    drawArea.strokeStyle = `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${opacity})`;
                    drawArea.beginPath();
                    drawArea.moveTo(point1.x, point1.y);
                    drawArea.lineTo(hubs[i].x, hubs[i].y);
                    drawArea.closePath();
                    drawArea.stroke();
                }
            }
        }

        Particle = function (xPos, yPos) {
            this.x = Math.random() * w;
            this.y = Math.random() * h;
            this.speed = opts.defaultSpeed + Math.random() * opts.variantSpeed;
            this.directionAngle = Math.floor(Math.random() * 360);
            this.color = opts.particleColor;
            this.radius = opts.defaultRadius + Math.random() * opts.variantRadius;
            this.vector = {
                x: Math.cos(this.directionAngle) * this.speed,
                y: Math.sin(this.directionAngle) * this.speed
            };
            this.update = function () {
                this.border();
                this.x += this.vector.x;
                this.y += this.vector.y;
            };
            this.border = function () {
                if (this.x >= w || this.x <= 0) {
                    this.vector.x *= -1;
                }
                if (this.y >= h || this.y <= 0) {
                    this.vector.y *= -1;
                }
                if (this.x > w) this.x = w;
                if (this.y > h) this.y = h;
                if (this.x < 0) this.x = 0;
                if (this.y < 0) this.y = 0;
            };
            this.draw = function () {
                drawArea.beginPath();
                drawArea.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
                drawArea.closePath();
                drawArea.fillStyle = this.color;
                drawArea.fill();
            };
        };

        function setup() {
            particles = [];
            resizeReset();
            for (let i = 0; i < opts.particleAmount; i++) {
                particles.push(new Particle());
            }
            window.requestAnimationFrame(loop);
        }

        function loop() {
            window.requestAnimationFrame(loop);
            drawArea.clearRect(0, 0, w, h);
            for (let i = 0; i < particles.length; i++) {
                particles[i].update();
                particles[i].draw();
            }
            for (let i = 0; i < particles.length; i++) {
                linkPoints(particles[i], particles);
            }
        }

        const canvasBody = document.getElementById("canvas"),
            drawArea = canvasBody.getContext("2d");
        let delay = 200, tid,
            rgb = opts.lineColor.match(/\d+/g);
        resizeReset();
        setup();
    </script>
</body>

</html>